<template>
  <s-page :custom-class="{ 'Home-Page': true }">
    <div v-for="(item, index) of pages" :key="index" class="nav">
      <div class="nav__title">{{ item.title }}</div>
      <div class="nav__group">
        <div v-for="(page, listIndex) of item.list" :key="listIndex" class="nav__block" @click="jumpTo(page.path)">
          {{ page.title }}
        </div>
        <div class="nav__block primary">primary</div>
        <div class="nav__block primary-dark">primary-dark</div>
        <div class="nav__block primary-light">primary-light</div>
        <div class="nav__block primary-disabled">primary-disabled</div>

        <div class="nav__block s-primary">s-primary</div>
        <div class="nav__block s-primary-dark">s-primary-dark</div>
        <div class="nav__block s-primary-light">s-primary-light</div>
        <div class="nav__block s-primary-disabled">s-primary-disabled</div>
      </div>
    </div>
  </s-page>
</template>

<script>
import pages from '@/common/pages';
export default {
  data() {
    return {
      pages,
    };
  },
  methods: {
    jumpTo(url) {
      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: $white;
}
.Home-Page {
  padding: 40rpx;
  .nav {
    + .nav {
      margin-top: 20rpx;
    }
    &__title {
      padding: 28rpx 0 16rpx 32rpx;
      color: $tips-color;
      font-size: $font-size-md;
    }
    &__block {
      position: relative;
      display: flex;
      padding-left: 40rpx;
      color: $text-color;
      font-weight: 600;
      font-size: 14px;
      line-height: 40px;
      background: $background-color;
      border-radius: $border-radius-max;
      transition: background 0.3s;
      + .nav__block {
        margin-top: 20rpx;
      }
      &.primary {
        background-color: $color-primary;
      }
      &.primary-dark {
        background-color: darken($color-primary, 10%);
      }
      &.primary-light {
        background-color: lighten($color-primary, 55%);
      }
      &.primary-disabled {
        background-color: mix($color-primary, white, 35%);
      }

      &.s-primary {
        background-color: $color-primary;
      }
      &.s-primary-dark {
        background-color: $color-primary-dark;
      }
      &.s-primary-light {
        background-color: $color-primary-light;
      }
      &.s-primary-disabled {
        background-color: $color-primary-disabled;
      }
    }
  }
}
</style>
